<template>
	<!-- 添加车辆 -->
	<view class="addCar">
		<!-- <u-navbar title="添加站点地" title-color="#333" back-icon-color="#333"></u-navbar> -->
		<view class="addCar-bottom">
			<view class="addCar-content-box">
				<view class="addCar-carName-phone">
					<text class="addCar-phone">站点名称：</text>
					<input placeholder="请输入站点名称" v-model="siteName"></input>
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">站点地区：</text>
					<view class="ellipsis" @click="show = true">{{ province }}-{{ city }}</view>
					<u-picker v-model="show" mode="region" :default-region='["河南省", "许昌市"]' :params="params"
						@confirm="onChange"></u-picker>
				</view>
				<!-- <view class="addCar-carName-phone">
					<text class="addCar-phone">站点位置：</text>
					<view class="flex" @click="getLocation">
						<input class="addCar-input-one ellipsis" disabled="disabled" type="text" placeholder="点击添加站点地"
							v-model="nameIpt"></input>
						<image class="loa_img_icon" src="../../static/images/loa-icon.png"></image>
					</view>
				</view> -->
				<view class="addCar-carName-phone">
					<text class="addCar-phone">站点位置：</text>
					
						<input class="addCar-input-one ellipsis" type="text" placeholder="输入站点位置"
							v-model="nameIpt"></input>
						
					
				</view>
				<!-- <view class="addCar-carName-phone">
					<view class="addCar-phone">详细地址：</view>
					<view style="width: 70%;">{{ nameIptAdres }}</view>
				</view> -->
				<view class="addCar-carName-phone">
					<view class="addCar-phone">详细地址：</view>
					<input class="addCar-input-one ellipsis" type="text" placeholder="输入详细位置"
						v-model="namexxIptAdres"></input>
					
				</view>
				<view class="addCar-carName-phone">
					<view class="addCar-phone">联系人：</view>
					<input placeholder="请输入联系人" v-model="name"></input>
				</view>
				<view class="addCar-carName-phone">
					<view class="addCar-phone">联系电话：</view>
					<input placeholder="请输入联系电话" v-model="phoneIpt" type="number" maxlength="11"></input>
				</view>
			</view>
			<!-- <view class="zhu_text">
				<text>注：填写站点地时，请详细到某商砼站或者某工地</text>
			</view> -->
			<!--  -->
			<view class="addCar-reset-determine">
				<view class="addCar-reset" @click="reset">重置</view>
				<view class="addCar-determine" @click="determine">确定</view>
			</view>
		</view>
		<u-modal v-model="addCarLoginShow" content="请确认是否添加该站点地" :show-cancel-button="true"
			@confirm="addCarConfirm"></u-modal>
	</view>
</template>

<script>
import {
	checkOpenGPSServiceByAndroid
} from '../../util/map.js';
export default {
	data() {
		return {
			params: {
				province: true,
				city: true,
				area: false,
			},
			show: false,
			userinfo: JSON.parse(uni.getStorageSync('userinfo')),
			siteName: '', //站点名称
			province: '河南省',
			city: '许昌市',
			nameIpt: '', //站点地
			nameIptAdres: '', //站点地详细地址
			namexxIptAdres:'',
			ORMTB492ID: '', //站点id
			latitude: 0,
			longitude: 0,
			name: '', //联系人
			phoneIpt: '', //联系方式
			addCarLoginShow: false,
			iteminfo: '', //回显
		}
	},
	mounted() {
		console.log(this.userinfo)
	},
	//编辑回显
	onLoad(option) {
		if (option.item && option.item != '') {
			this.iteminfo = JSON.parse(option.item)
			console.log('iteminfo', this.iteminfo)
			this.ORMTB492ID = this.iteminfo.ORMTB492ID
			// this.nameIptAdres = this.iteminfo.ORMTB491CA01
			this.namexxIptAdres = this.iteminfo.ORMTB491CA01
			this.siteName = this.iteminfo.ORMTB491CA00
			this.nameIpt = this.iteminfo.ORMTB491CA11
			this.longitude = this.iteminfo.ORMTB491CA02
			this.latitude = this.iteminfo.ORMTB491CA03
			this.name = this.iteminfo.ORMTB491CA04
			this.phoneIpt = this.iteminfo.ORMTB491CA05
			this.province = this.iteminfo.ORMTB491CA06
			this.city = this.iteminfo.ORMTB491CA07
		}
	},
	methods: {
		onChange(e) {
			console.log(`output->eeeee`, e)
			this.province = e.province.label
			this.city = e.city.label
		},
		getLocation() {
			checkOpenGPSServiceByAndroid()
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					let {
						latitude,
						longitude
					} = res;
					// 设置中心
					this.latitude = latitude;
					this.longitude = longitude;
					this.getmasgpoi()
				}
			});
		},
		getmasgpoi() {
			let _this = this
			uni.chooseLocation({
				latitude: _this.latitude,
				longitude: _this.longitude,
				keyword: _this.nameIpt,
				success: function (res) {
					console.log(res)
					console.log(res.name)
					_this.nameIpt = res.name
					_this.nameIptAdres = res.address
					_this.latitude = res.latitude
					_this.longitude = res.longitude
				},
				fail: function (fail) {
					uni.showToast({
						title: '位置获取失败',
						duration: 5000,
						icon: 'none',
					});
				}
			})
		},
		// 确定
		determine() {
			if (this.siteName.trim() == '') {
				uni.showToast({
					title: '站点名称不可为空',
					duration: 5000,
					icon: 'none',
				});
				return
			}
			if (this.nameIpt.trim() == '') {
				uni.showToast({
					title: '站点地不可为空',
					duration: 5000,
					icon: 'none',
				});
				return
			}
			if (this.name.trim() == '') {
				uni.showToast({
					title: '联系人不可为空',
					duration: 5000,
					icon: 'none',
				});
				return
			}
			var reg = /^1[3-9][0-9]{9}$/;
			if (!reg.test(this.phoneIpt)) {
				uni.showToast({
					title: '请输入有效手机号',
					duration: 5000,
					icon: 'none',
				});
				return
			}
			this.addCarLoginShow = true
		},
		addCarConfirm() {
			let id = ''
			if (this.userinfo.sign == 'CUS-1') {
				id = this.userinfo.ORMTB400ID
			} else if (this.userinfo.sign == 'CUS-2' || this.userinfo.sign == 'CUS-3') {
				id = this.userinfo.ORMTB410ID
			}

			let url = this.baseUrl + '/orm/ormtb492/saveOrmtb492' //添加接口
			if (this.iteminfo && this.iteminfo != '') {
				url = this.baseUrl + '/orm/ormtb492/updateOrmtb492' //编辑接口
			}
			uni.request({
				url,
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB410ID: id,
					ORMTB492ID: this.ORMTB492ID,
					"ORMTB491CA00": this.siteName,
					"ORMTB491CA11": this.nameIpt,
					"ORMTB491CA01": this.namexxIptAdres,
					"ORMTB491CA02": this.longitude,
					"ORMTB491CA03": this.latitude,
					"ORMTB491CA04": this.name,
					"ORMTB491CA05": this.phoneIpt,
					"ORMTB491CA06": this.province,
					"ORMTB491CA07": this.city,
					sign: this.userinfo.sign,
				},
				success: (res) => {
					// console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							title: '操作成功',
							duration: 5000,
							icon: 'none',
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				},
				fail: (res) => {
					uni.showToast({
						title: res.errMsg,
						duration: 5000,
						icon: 'none',
					});
				}
			});
		},
		// 重置
		reset() {
			this.nameIptAdres = '' //站点地址
			this.siteName = '' //站点名称
			this.nameIpt = '' //站点位置
			this.province = '河南省'
			this.city = '许昌市'
			this.longitude = 0 //经度
			this.latitude = 0 //纬度
			this.name = '' //联系人
			this.phoneIpt = '' //联系人电话
		},
	}
}
</script>

<style lang="scss" scoped>
.flex {
	display: flex;
}

.addCar input {
	border: 0;
}

.addCar {
	width: 100%;
	min-height: 100vh;
	background-color: rgba(242, 242, 242, 1);
	overflow: hidden;
}

/* 列表 */

/* 内容 */
.addCar-content-box {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	padding: 0 24rpx;
}

.addCar-carName-phone {
	border-bottom: 2rpx solid rgba(230, 230, 230, 1);
	padding: 18rpx 0;
	display: flex;
	align-items: center;

	input {
		flex: 1;
	}
}

.addCar-input-one {
	flex: 1;
	display: inline-block;
	margin-bottom: 0 !important;
	padding: 0 !important;
	color: rgba(51, 51, 51, 1);
}

.ellipsis {
	width: 492rpx;
	/* 设置容器宽度 */
	white-space: nowrap;
	/* 禁止文本换行 */
	overflow: hidden;
	/* 隐藏超出容器的部分文本 */
	text-overflow: ellipsis;
	/* 使用省略号显示被修剪的文本 */
}

.addCar-phone {
	width: 168rpx;
	display: inline-block;
	font-size: 30rpx;
	color: rgba(102, 102, 102, 1);
	/* background: #000000; */
}

.addCar-phone-placeholder {
	font-size: 30rpx;
	color: rgba(102, 102, 102, .5);
}

.addCar-dun {
	color: rgba(51, 51, 51, 1);
	font-size: 30rpx;
}

/* 按钮 */
.addCar-reset-determine {
	margin-top: 167rpx;
	display: flex;
}

.addCar-reset-determine>view {
	width: 159rpx;
	text-align: center;
	line-height: 65rpx;
	color: rgba(255, 255, 255, 1);
	font-size: 32rpx;
}

.addCar-reset {
	width: 159rpx;
	background: rgba(234, 197, 15, 1);
	text-align: center;
	margin-left: 170rpx;
}

.addCar-determine {
	background: rgba(0, 161, 244, 1);
	margin-left: 60rpx;
}

.addCar-phone-car {
	display: inline-block;
	width: 310rpx;
	height: 44rpx;
	line-height: 44rpx;
	/* border: 1px solid rgba(0, 0, 0, .2); */
	/* border-radius: 3px; */
	text-align: center;
	vertical-align: middle;
	font-size: 30rpx;
}

input::placeholder {
	color: rgba(102, 102, 102, .5);
}

.loa_img_icon {
	width: 40rpx;
	height: 40rpx;
}

.zhu_text {
	color: red;
	padding: 24rpx;
}
</style>